<template>
  <div class="home-nav mt-4 border-b-2 yu-color-text pb-1 mb-4" :class="styleTags.flexCenter">
    <div :class="styleTags.flexCenter">
      <van-icon class="yu-color-text text-xl" class-prefix="i-mdi-record-circle"/>
      <span class="pl-3 text-2xl">{{ title }}</span>
    </div>
    <slot name="tags"></slot>
    <div v-if="more" class="flex-1 justify-end" @click="jumpPlaylist()" :class="styleTags.flexCenter">
      <span :class="styleTags.hoverTransition">更多</span>
      <van-icon class="yu-color-text text-2xl" class-prefix="i-mdi-arrow-right-thin"/>
    </div>
  </div>
</template>

<script setup>
// 接口返回的数据
import {reactive} from "vue";
import {toRefs} from "vue";

const hotRecommend = reactive({
      styleTags: {
        flexCenter: ['flex items-center'],
        hoverTransition: ['transition duration-200 yu-textColor-hover cursor-pointer'],
        position: ['absolute top-0 bg-indigo-600 bg-opacity-50 p-1 box-border']
      }
    }
)
defineProps({
  title: String,
  more: {
    type: Boolean,
    default: true
  }
})

const $emit = defineEmits(['jumpPlaylist'])
const jumpPlaylist = () => {
  $emit('jumpPlaylist')
}
const {styleTags} = toRefs(hotRecommend)
</script>

<style scoped>

</style>
